<template>
  <!-- 基础仪表盘 -->
  <!-- {{ stylesConfig }} -->
  <div
    ref="chartEl"
    :style="stylesConfig"
    v-resize="resizeHandler"
    class="compo-public-style"
  ></div>
</template>

<script setup>
import { computed } from 'vue';

import { useChartComponentData } from '@/hooks/use-chart-component-data';

const props = defineProps({
  value: {
    type: Object,
    default: () => {}
  },
  preview: {
    type: Boolean,
    default: () => false
  }
});

// 样式配置
const stylesConfig = computed(() => {
  return {
    width: `${styles.value?.w / 100}rem`,
    height: `${styles.value?.h / 100}rem`,
    position: preview.value ? 'absolute' : 'static',
    left: `${styles.value?.x}px`,
    top: `${styles.value?.y}px`,
    borderRadius: `${styles.value.leftTop / 100}rem ${
      styles.value.rightTop / 100
    }rem ${styles.value.rightBottom / 100}rem ${
      styles.value.leftBottom / 100
    }rem`
  };
});

const mockData = {
  // tooltip: {
  //   // formatter: '{a} <br/>{b} : {c}%'
  // },
  legend: {
    show: true //是否展示图例
  },
  series: [
    {
      name: 'Pressure',
      type: 'gauge',
      splitNumber: 5, //分几份
      progress: {
        show: true,
        width: 2
      },
      detail: {
        valueAnimation: true, //动效
        color: 'inherit',
        fontSize: 12
      },
      axisLine: {
        lineStyle: {
          width: 1
        }
      },
      data: [
        {
          value: 50,
          name: 'SCORE'
        }
      ]
    }
  ]
};
//图形类型配置
const chartTypeConfig = {
  type: 'gauge'
};
const { styles, preview, chartEl, resizeHandler } = useChartComponentData(
  props,
  mockData,
  chartTypeConfig
);
</script>
<style scoped lang="scss"></style>
